<template>
  <div class="index online">
    <Header></Header>
    <div class="main">
      <div class="mianOut">
        <div class="note">
          <p>
            <img src="../../../static/images/sound.png" />提示信息：您的应急预案已经编制完成了，正式发布前还需要组织应急预案评审。
          </p>
        </div>
        <div class="mianInner">
          <div class="asTitle">
            <h3>应急预案评审</h3>
          </div>
          <ul class="asList clearfix">
            <li>
              <router-link :to="{path:'underlineAssess',query:{navIndex:4}}">线下评审</router-link>
            </li>
            <li>
              <router-link class="active" :to="{path:'onlineAssess',query:{navIndex:4}}">线上评审</router-link>
            </li>
          </ul>
          <div class="expert_main" v-show="flag == 0">
            <div class="asBtns">
              <dl>
                <dt class="dl-btn">
                  <i class="el-icon-info"></i>温馨提示
                </dt>
                <dd>
                  （1）请提前与您选定的评审专家
                  <strong style="color:red;font-weight:800;">电话沟通评审时间、费用、需求等</strong>，确保评审工作顺利开展！
                </dd>
                <dd>
                  （2）为了保证应急预案评审的客观性、公正性，请您选择与本单位无利益关系的
                  <strong style="color:red;font-weight:800;">奇数 ( ≤5 )</strong> 个专家！如需要更多专家可以联系我们！
                </dd>
              </dl>
              <el-form :inline="true" :model="formInline" class="demo-form-inline clearfix">
                <a class="formBtn" @click="startSet">组建专家评审</a>
                <div class="fr clearfix">
                  <el-form-item>
                    <el-select v-model="formInline.province" placeholder="选择省份">
                      <el-option
                        v-for="(item,index) in types"
                        :label="item.varName"
                        :value="item.intId"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="关键字 : ">
                    <el-input v-model="formInline.key" style="width:300px;" placeholder="请输入专家姓名"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="search" @click="getAllList">
                      <i class="el-icon-search"></i> 搜索
                    </el-button>
                    <el-button class="search" @click="reset">
                      <i class="el-icon-refresh"></i> 重置
                    </el-button>
                  </el-form-item>
                </div>
              </el-form>
            </div>
            <el-table ref="multipleTable1" v-loading="loading1" @selection-change="handleSelectionChange" :data="allData" >
              <el-table-column align="center" label="序号" width="50"> <template slot-scope="scope">{{10*(currentPage-1)+1+scope.$index}}</template> </el-table-column>
              <el-table-column label type="selection" align="center" width="50"></el-table-column>
              <el-table-column prop="userName" label="姓名" align="center" width="100"></el-table-column>
              <el-table-column prop="companyId" label="工作单位" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="phone" label="联系电话" align="center" width="120"></el-table-column>
              <el-table-column prop="title" label="职称" show-overflow-tooltip align="center"  width="100" ></el-table-column>
              <el-table-column prop="regionId" label="地区" show-overflow-tooltip align="center" width="100" ></el-table-column>
              <el-table-column prop="businessId" label="所属行业" align="center" width="100"></el-table-column>
            </el-table>
            <div class="page-container">
              <el-pagination
                :pager-count="5"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
              <el-button>确定</el-button>
            </div>
          </div>
          <div class="waitSend" v-show="flag ==1">
            <div class="sendMain1">
              <div class="asTitle">
                <h3>评审专家信息</h3>
              </div>
              <div class="formbtns clearfix">
                <a class="save" @click="addPen" style="float:left;margin-left:100px;">添加</a>
                <a :class="flag3 ? 'save':'send send1' "  style="margin-right:100px;width:80px;"  @click="beforeSend" >发送</a>
              </div>
              <el-table ref="multipleTable" :data="selectData2">
                <el-table-column align="center" label="序号" width="50"><template slot-scope="scope">{{1+scope.$index}}</template> </el-table-column>
                <el-table-column prop="userName" label="专家姓名" align="center" width="150"></el-table-column>
                <el-table-column prop="companyId" label="工作单位" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="title" label="职称" align="center" show-overflow-tooltip width="150"></el-table-column>
                <el-table-column prop="businessId" label="所属行业" align="center" width="100"></el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center" width="120"></el-table-column>
                <el-table-column prop="regionId" label="地区" show-overflow-tooltip align="center" width="100" ></el-table-column>
                <el-table-column prop="identity" label="身份" align="center" width="50"></el-table-column>
                <el-table-column label="操作" align="center" width="340">
                  <template slot-scope="scope">
                    <div>
                      <el-button
                        :class="scope.row.identity == '组长' ? ' detail-btn active':'detail-btn'"
                        @click="setBefore(scope.row.id,'1')"
                      >任命为组长</el-button>
                      <el-button
                        :class="scope.row.identity == '组员' ? ' detail-btn active':'detail-btn'"
                        @click="setBefore(scope.row.id,'2')"
                      >任命为组员</el-button>
                      <el-button class="detail-btn" @click="deleteRole(scope.row.id)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="sendMain2">
              <div class="asTitle">
                <h3>评审时间</h3>
              </div>
              <div class="timeSelect">
                <span>设置评审时间:</span>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </div>
            </div>
            <div class="sendMain3">
              <div class="asTitle" style="margin-bottom:50px;">
                <h3>待评审的应急预案</h3>
              </div>
              <el-table ref="multipleTable" :data="joinData">
                <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
                <el-table-column label="文件名称" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <a class="fileName">{{scope.row.templateName}}</a>
                  </template>
                </el-table-column>
                <el-table-column prop="operTime" label="上传时间" align="center" width="200"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="backInfo" v-show="flag==2">
            <div class="sendMain1">
              <div class="asTitle">
                <h3 style="margin-bottom:10px;">评审专家信息</h3>
              </div>
              <div style="padding:0 100px;">
                <el-table ref="multipleTable" :data="selectData2" style="width:100%;">
                  <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                  <el-table-column prop="userName" label="专家姓名" align="center" width="150"></el-table-column>
                  <el-table-column prop="companyId" label="工作单位" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="title" label="职称" align="center" width="150" show-overflow-tooltip ></el-table-column>
                  <el-table-column prop="businessId" label="所属行业" align="center" width="100"></el-table-column>
                  <el-table-column prop="phone" label="联系电话" align="center" width="120"></el-table-column>
                  <el-table-column prop="regionId" label="地区" show-overflow-tooltip align="center" width="100" ></el-table-column>
                  <el-table-column prop="identity" label="身份" align="center" width="50"></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="infoMain1" v-if="selectData2.length > 0">
              <div class="sendMain2">
                <div class="asTitle">
                  <h3>评审时间</h3>
                </div>
                <div class="timeSelect" style="font-size:14px;" v-if="selectData2[0].startTime">
                  <span style="padding-right:30px;">
                    <i class="el-icon-date" style="padding-right:10px;"></i>
                    开始日期 :{{selectData2[0].startTime.split('00:00:00')[0]}}
                  </span>
                  <span>
                    <i class="el-icon-date" style="padding-right:10px;"></i>
                    结束日期 :{{selectData2[0].endTime.split('00:00:00')[0]}}
                  </span>
                </div>
              </div>
              <div class="asTitle">
                <h3 style="margin-bottom:20px;">评审意见汇总</h3>
              </div>
              <el-table ref="multipleTable" :data="data4">
                <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
                <!-- <el-table-column label="文件名称" align="left" prop="planSummaryName" show-overflow-tooltip ></el-table-column> -->
                <el-table-column label="类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.reviewType ==1">形式评审表</span>
                    <span v-if="scope.row.reviewType ==2">要素评审表</span>
                    <span v-if="scope.row.reviewType ==3">附件要素评审表</span>
                    <span v-if="scope.row.reviewType ==4">评审意见表</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <a class="fileName" @click="goDetail(scope.row.reviewType,scope.row.planSummaryId,scope.row.id)">查看</a>
                    <a class="fileName" @click="downFile(scope.row.reviewType)">导出</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="infoMain2">
              <div class="asTitle">
                <h3>应急预案汇编修改</h3>
              </div>
              <p>
                <i class="el-icon-warning"></i>如果您需要根据评审意见修改应急预案，请点击应急预案汇编进行修改</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog title="详情" :visible.sync="allFlag4" width="80%">
      <el-button class="print-btn" @click="clickPrinting(4)" >打印</el-button>
      <el-button @click="savePersonAll"  class="print-btn" style="top:64px;right:150px;" >保存</el-button>
      <div class="ideaMain canvas" ref="print4" v-if="detailData4.length>0">
        <h2 class="ideaTitle">突发事件综合应急预案评审意见表</h2>
        <p class="comName">单位名称: {{detailData4[0].companyName}}</p>
        <table class="ideaTable">
          <colgroup>
            <col width="160px" />
            <col width />
          </colgroup>
          <tr>
            <td>{{detailData4[0].reviewItemOne}}</td>
            <td>
              <strong>{{joinData[0].planSummaryName}}</strong>
            </td>
          </tr>
          <tr>
            <td>{{detailData4[1].reviewItemOne}}</td>
            <td class="edit-name">
              <el-input placeholder="必填" v-model="organizationName" style="border:0;"></el-input>
            </td>
          </tr>
          <tr>
            <td>{{detailData4[2].reviewItemOne}}</td>
            <td>
              <p style="text-indent:20px;">
                {{detailData4[0].createTime.split(' ')[0].split('-')[0]+'年'+detailData4[0].createTime.split(' ')[0].split('-')[1]+'月'+detailData4[0].createTime.split(' ')[0].split('-')[2]}}日，{{detailData4[2].companyName}}进行了应急预案专家评审工作。
                评审专家组参照《电力企业应急预案评审与备案细则》，从合法性、完整性、针对性、实用性、科学性、操作性和衔接性等方面，对应急预案的层次结构、语言文字、要素内容、附件项目等进行了系统的审查，并查看了应急预案桌面演练的记录，形成如下评审意见:
              </p>
              <textarea
                id="textarea"
                placeholder=""
                v-model="suggest2"
                style="resize:none;width:100%;border:0;color:#333;"
                readonly
              ></textarea>
            </td>
          </tr>
          <tr>
            <td>
              评审专家组
              <br />一致认为：
            </td>
            <td>{{consensus}}</td>
          </tr>
          <tr>
            <td>评审专家（签字）：</td>
            <td class="sign-word">
              <img
                v-for="item in signImg4"
                :key="item"
                :src="item"
                alt
                style="margin-right:10px;"
              />
            </td>
          </tr>
          <tr>
            <td>备注</td>
            <td>{{remark5}}</td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="allFlag1" width="80%">
      <el-button  class="print-btn" @click="clickPrinting(1)">打印</el-button>
      <div class="ideaMain" ref="print1">
        <h2 class="ideaTitle">电力企业应急预案形式评审表</h2>
        <table class="ideaTable ideaTable1" v-if="detailData1.length>0">
          <thead>
            <tr>
              <th rowspan="2">评审项目</th>
              <th rowspan="2">评审内容及要求</th>
              <th colspan="3">评审意见</th>
            </tr>
            <tr>
              <th class="is-ok">符合</th>
              <th class="is-ok">不符合</th>
              <th class="is-ok">基本符合</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{detailData1[0].reviewItemTwo}}</td>
              <td><p>{{detailData1[0].reviewContent}}</p></td>
              <td v-for="item in radios" :key="item"  class="radioImg" >
                {{detailData1[0].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData1[1].reviewItemTwo}}</td>
              <td><p>{{detailData1[1].reviewContent}}</p></td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData1[1].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData1[2].reviewItemTwo}}</td>
              <td>
                <p>{{detailData1[2].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
              {{detailData1[2].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:120px;">{{detailData1[3].reviewItemTwo}}</td>
              <td style="width:300px;">
                <p>{{detailData1[3].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData1[3].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData1[4].reviewItemTwo}}</td>
              <td>
                <p>{{detailData1[4].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
              {{detailData1[4].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData1[5].reviewItemTwo}}</td>
              <td>
                <p>{{detailData1[5].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData1[5].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>评审专家签字</td>
              <td colspan="4" class="sign-word">
                <img
                  v-for="item in signImg1"
                  :key="item"
                  :src="item"
                  style="margin-right:10px;"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="allFlag2" width="80%">
      <el-button  class="print-btn" @click="clickPrinting(2)">打印</el-button>
      <div class="ideaMain" ref="print2">
        <h2 class="ideaTitle" style="margin-bottom:50px;text-align:center;">电力企业综合应急预案要素评审表</h2>
        <table v-if="detailData2.length>0" ref="print" class="ideaTable ideaTable1">
          <thead>
            <tr>
              <th rowspan="2" colspan="2">评审项目</th>
              <th rowspan="2">评审内容及要求</th>
              <th colspan="3">评审意见</th>
            </tr>
            <tr>
              <th class="is-ok">符合</th>
              <th class="is-ok">不符合</th>
              <th class="is-ok">基本符合</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td rowspan="5" class="firtTit">{{detailData2[0].reviewItemOne}}</td>
              <td style="width:100px;text-align:center;">{{detailData2[0].reviewItemTwo}}</td>
              <td style="min-width:400px;">
                <p>{{detailData2[0].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
               
              >
               {{detailData2[0].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[1].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[1].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData2[1].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[2].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[2].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData2[2].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[3].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[3].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData2[3].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[4].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[4].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData2[4].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="2">{{detailData2[5].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[5].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData2[5].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td rowspan="2" class="firtTit">{{detailData2[6].reviewItemOne}}</td>
              <td>
                <p style="padding:0 10px;text-align:center;">{{detailData2[6].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[6].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData2[6].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>
                <p
                  style="padding:0 10px;text-align:center;width:120px;"
                >{{detailData2[7].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[7].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
              {{detailData2[7].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td rowspan="2" class="firtTit">{{detailData2[8].reviewItemOne}}</td>
              <td>
                <p style="padding:0 10px;text-align:center;">{{detailData2[8].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[8].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData2[8].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>
                <p style="padding:0 10px;text-align:center;">{{detailData2[9].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[9].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData2[9].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td rowspan="4" class="firtTit">{{detailData2[10].reviewItemOne}}</td>
              <td>
                <p
                  style="padding:0 10px;text-align:center;width:120px;"
                >{{detailData2[10].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[10].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
               {{detailData2[10].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>
                <p style="padding:0 20px;text-align:center;">{{detailData2[11].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[11].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[11].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>
                <p style="padding:0 20px;text-align:center;">{{detailData2[12].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[12].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[12].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>
                <p style="padding:0 20px;text-align:center;">{{detailData2[13].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[13].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[13].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="2">{{detailData2[14].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[14].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[14].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="2">{{detailData2[15].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[15].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[15].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="2">{{detailData2[16].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[16].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[16].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td rowspan="5" style="width:80px;padding:0 10px;">{{detailData2[17].reviewItemOne}}</td>
              <td style="width:100px;text-align:center;">{{detailData2[17].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[17].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[17].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[18].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[18].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[18].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[19].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[19].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[19].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[20].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[20].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[20].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData2[21].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[21].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[21].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <p>注：“＊”代表应急预案的关键要素。</p>
              </td>
            </tr>
            <tr>
              <td colspan="2">评审专家签字</td>
              <td colspan="4" class="sign-word">
                <img
                  v-for="item in signImg2"
                  :key="item"
                  :src="item"
                  alt
                  style="margin-right:10px;"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <h2 class="ideaTitle" style="margin-top:10px;">电力企业专项应急预案要素评审表</h2>
        <table class="ideaTable ideaTable1" v-if="detailData2.length>0">
          <thead>
            <tr>
              <th rowspan="2" colspan="2">评审项目</th>
              <th rowspan="2">评审内容及要求</th>
              <th colspan="3">评审意见</th>
            </tr>
            <tr>
              <th class="is-ok">符合</th>
              <th class="is-ok">不符合</th>
              <th class="is-ok">基本符合</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="2">{{detailData2[22].reviewItemTwo}}</td>
              <td>
                <p>{{detailData2[22].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[22].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td rowspan="2" style="width:80px;padding:0 10px;">{{detailData2[23].reviewItemOne}}</td>
              <td style="width:100px;padding:0 10px;">
                <p style="text-align:center;">{{detailData2[23].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[23].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[23].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:100px;padding:0 10px;">
                <p style="text-align:center;">{{detailData2[24].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[24].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData2[24].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:100px;padding:0 10px;" colspan="2">
                <p style="text-align:center;">{{detailData2[25].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[25].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData2[25].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:100px;padding:0 10px;" colspan="2">
                <p style="text-align:center;">{{detailData2[26].reviewItemTwo}}</p>
              </td>
              <td>
                <p>{{detailData2[26].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData2[26].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <p>注 : "*"代表应急预案的关键要素。如果专项应急预案作为综合应急预案的附件,综合应急预案已经明确胡要素,专项应急预案可省略。</p>
              </td>
            </tr>
            <tr>
              <td colspan="2">评审专家签字</td>
              <td colspan="4" class="sign-word">
                <img
                  v-for="item in signImg2"
                  :key="item"
                  :src="item"
                  alt
                  style="margin-right:10px;"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="allFlag3" width="80%">
      <el-button @click="clickPrinting(3)"  class="print-btn">打印</el-button>
      <div class="ideaMain" ref="print3">
        <h2 class="ideaTitle">电力企业应急预案附件要素评审表</h2>
        <table v-if="detailData3.length > 0" class="ideaTable ideaTable1">
          <thead>
            <tr>
              <th rowspan="2">评审项目</th>
              <th rowspan="2">评审内容及要求</th>
              <th colspan="3">评审意见</th>
            </tr>
            <tr>
              <th class="is-ok">符合</th>
              <th class="is-ok">不符合</th>
              <th class="is-ok">基本符合</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{detailData3[0].reviewItemTwo}}</td>
              <td>
                <p>{{detailData3[0].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                  {{detailData3[0].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData3[1].reviewItemTwo}}</td>
              <td>
                <p>{{detailData3[1].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData3[1].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td>{{detailData3[2].reviewItemTwo}}</td>
              <td>
                <p>{{detailData3[2].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData3[2].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:120px;">{{detailData3[3].reviewItemTwo}}</td>
              <td style="width:300px;">
                <p>{{detailData3[3].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                {{detailData3[3].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td style="width:120px;">{{detailData3[4].reviewItemTwo}}</td>
              <td style="width:300px;">
                <p>{{detailData3[4].reviewContent}}</p>
              </td>
              <td
                v-for="item in radios"
                :key="item"
                class="radioImg"
              >
                 {{detailData3[4].selectResult  == item ? '√':''}}
              </td>
            </tr>
            <tr>
              <td colspan="5" style="text-align:left;">
                <p>注 : 附件根据应急工作需要动态设置,部分项目可省略。</p>
              </td>
            </tr>
            <tr>
              <td>评审专家签字</td>
              <td colspan="4" class="sign-word">
                <img
                  v-for="item in signImg3"
                  :key="item"
                  :src="item"
                  alt
                  style="margin-right:10px;"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="系统提示" :visible.sync="sendFlag" width="35%" :append-to-body="true">
      <div style="height:160px;">
        <span class="exitTcNote">请确认和专家已沟通评审任务，点击“确定”按钮后应急预案将发送给专家进行评审。</span>
        <div style="overflow:hidden;margin-top:80px;">
          <a
            class="send"
            @click="sendFlag = false"
            style="margin:0;border: 1px solid #5ea0ff;color: #4080ff;width:80px;"
          >取 消</a>
          <a class="save" @click="sendSelect">确认</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Header from "../common/header";
import Footer from "../common/footer";
import config from "../../config.js";
var autoTextarea = function(elem, extra, maxHeight) { 
  extra = extra || 0;
  var isFirefox = !!document.getBoxObjectFor || "mozInnerScreenX" in window,
    isOpera = !!window.opera && !!window.opera.toString().indexOf("Opera"),
    addEvent = function(type, callback) {
      elem.addEventListener
        ? elem.addEventListener(type, callback, false)
        : elem.attachEvent("on" + type, callback);
    },
    getStyle = elem.currentStyle
      ? function(name) {
          var val = elem.currentStyle[name];

          if (name === "height" && val.search(/px/i) !== 1) {
            var rect = elem.getBoundingClientRect();
            return (
              rect.bottom -
              rect.top -
              parseFloat(getStyle("paddingTop")) -
              parseFloat(getStyle("paddingBottom")) +
              "px"
            );
          }

          return val;
        }
      : function(name) {
          return getComputedStyle(elem, null)[name];
        },
    minHeight = parseFloat(getStyle("height"));

  elem.style.resize = "none";

  var change = function() {
    var scrollTop,
      height,
      padding = 0,
      style = elem.style;

    if (elem._length === elem.value.length) return;
    elem._length = elem.value.length;

    if (!isFirefox && !isOpera) {
      padding =
        parseInt(getStyle("paddingTop")) + parseInt(getStyle("paddingBottom"));
    }
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    elem.style.height = minHeight + "px";
    if (elem.scrollHeight > minHeight) {
      if (maxHeight && elem.scrollHeight > maxHeight) {
        height = maxHeight - padding;
        style.overflowY = "auto";
      } else {
        height = elem.scrollHeight - padding;
        style.overflowY = "hidden";
      }
      style.height = height + extra + "px";
      scrollTop += parseInt(style.height) - elem.currHeight;
      document.body.scrollTop = scrollTop;
      document.documentElement.scrollTop = scrollTop;
      elem.currHeight = parseInt(style.height);
    }
  };

  addEvent("propertychange", change);
  addEvent("input", change);
  addEvent("focus", change);
  change();
};
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
        onPick(time) {
          let timeRange = 24 * 60 * 60 * 1000;
          if (time.maxDate && time.minDate) {
            if (time.maxDate.getTime() - time.minDate.getTime() < timeRange) {
              this.$message.warning("至少1天");
              time.$emit("pick", [null, null]);
            }
          }
        }
      },
      organizationName: "",
      loading1: false,
      flag3: false,
      flag: 0,
      id2: "",
      sendFlag: false,
      allData: [],
      suggest2: "",
      allFlag1: false,
      allFlag2: false,
      allFlag3: false,
      allFlag4: false,
      selectData2: [],
      currentPage: 1,
      total: 0,
      radios: [1, 2, 3],
      detailData1: [],
      detailData2: [],
      detailData3: [],
      detailData4: [],
      selectArr: {},
      types: [],
      formInline: {
        province: "",
        key: ""
      },
      joinData: [],
      value1: [],
      data4: []
    };
  },
  mounted() {
    this.getjoinData();
    this.getProvince();
    this.getSelect();
  },
  methods: {
      downFile (n) {
          console.log(this.joinData[0])
        let params = {
            companyId: JSON.parse(localStorage.getItem("user")).companyId,
            // planSummaryId: this.joinData[0].id,
            reviewType: n
            // userName: JSON.parse(localStorage.getItem("user")).userName
        };
        this.$axios({
            method: "get",
            url: config.baseUrl + 'bsReviewSendCompany/v1.0/export/review/tables/'+JSON.parse(localStorage.getItem("user")).companyId+'/'+ n
        }).then(res => {
          if (res.data.meta.success) {
            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = res.data.data;
            document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
              iframe.remove();
            }, 5 * 60 * 1000);
          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    clickPrinting(n) {
      this.$print(this.$refs["print" + n]);
    },
    goDetail(n, id, id1) {
      this.id1 = id;
      this["allFlag" + n] = true;
      if (n == 4) {
        this.getPersonDetail(id1);
        this.id2 = id1;
      } else {
        this.getDetail(n, id);
      }
    },
    savePersonAll() {
      if (this.organizationName == "") {
        this.$message.warning("请填写应急预案编制人员");
      } else {
        let id = "";
        let url = config.baseUrl + "emergency/v1.0/review/edit";
        this.selectData2.map(item => {
          if (item.identity == "组长") {
            id = item.userId;
          }
        });
        let param = {
          organizationName: this.organizationName,
          reviewType: "4",
          planSummaryId: this.joinData[0].id,
          id: this.id2
        };
        this.$axios.post(url, param).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.getPersonDetail(this.id2);
          } else {
            this.$message.warning(res.data.meta.message);
          }
        });
      }
    },
    getPersonDetail(id) {
      let url = config.baseUrl + "emergency/v1.0/review/look?id=" + id;
      this.$axios.post(url).then(res => {
        if (res.data.meta.success) {
          this.signImg4 = res.data.data.url;
          this.detailData4 = res.data.data.list;
          if (res.data.data.list[0].organizationName) {
            this.organizationName = res.data.data.list[0].organizationName;
          }
          this.consensus = res.data.data.list[0].consensus;
          this.remark5 = res.data.data.list[0].remarks;
          this.suggest2 = res.data.data.list[0].opinion;

          this.$nextTick(() => {
            var text = document.getElementById("textarea");
            autoTextarea(text); 
          });
        } else {
          this.$message.warning(res.data.meta.message);
        }
      });
    },
    getDetail(n, id) {
      let url = config.baseUrl + "bsReview/v1.0/review/summaryInfoByType?planSummaryId=" + id +  "&reviewType=" + n;
      this.$axios.get(url).then(res => {
        if (res.data.meta.success) {
          this["signImg" + n] = res.data.data.url;
          this["detailData" + n] = res.data.data.list;
        } else {
          this.$message.warning(res.data.meta.message);
        }
      });
    },
    addPen() {
      this.flag = 0;
      this.$refs.multipleTable1.clearSelection();
      this.selectArr = {};
      this.getAllList();
    },
    handleSelectionChange(val) { 
      this.selectArr["obj" + this.currentPage] = val;
      let num = this.selectData2.length;
      let obj = this.selectArr;
      for (var i in obj) {
        num += obj[i].length;
      }
      val.map((item, index) => {
        if (item.companyId == JSON.parse(localStorage.user).companyId) {
          this.$message.warning(
            "请选择与" +
              JSON.parse(localStorage.user).companyName +
              "无利益关系的专家"
          );
          this.$nextTick(() => {
            this.$refs.multipleTable1.toggleRowSelection(
              val[val.length - 1],
              false
            );
          });
        }
      });
      if (num > 5) {
        this.$message.warning("专家评审团人员不能超过5个");
        this.$nextTick(() => {
          this.$refs.multipleTable1.toggleRowSelection(
            val[val.length - 1],
            false
          );
        });
      }
    },
    startSet() {
      let num = this.selectData2.length;
      let obj = this.selectArr;
      for (var i in obj) {
        num += obj[i].length;
      }
      if (num > 0) {
        if (num % 2 == 0) {
          this.$message.warning("请确保专家评审团人员数量为奇数");
        } else {
          let ids = "";
          for (var i in obj) {
            obj[i].map(item => {
              ids += item.userId + ",";
            });
          }
          if (ids != "") {
            this.saveSelect(ids.substring(0, ids.length - 1));
          }
          this.getSelect();
          this.flag = 1;
        }
      } else {
        this.$message.warning("请选择评审专家");
      }
    },
    getProvince() { 
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/Province")
        .then(res => {
          if (res) {
            this.types = res.data;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    deleteRole(id) { 
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/delete?id=" + id)
        .then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.getSelect();
          } else {
            this.$message.warning(res.data.meta.message);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    saveSelect(ids) { 
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/save", {
          companyId: JSON.parse(localStorage.user).companyId,
          userId: ids
        })
        .then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.$refs.multipleTable1.clearSelection();
            this.selectArr = {};
            this.getSelect();
          } else {
            this.$message.warning(res.data.meta.message);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    sendSelect2() { 
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/send", {
          planSummaryId: this.joinData[0].id
        })
        .then(res => {
          if (res.data.meta.message == "已发送，无需再发送") {
            this.summarylist();
            this.flag = 2;
            this.getSelect();
          } else {
            this.flag3 = true;
            this.getAllList();
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    beforeSend() { 
      let flag4 = false;
      let flag5 = "";
      this.selectData2.map(item => {
        if (item.identity == "/") {
          flag4 = true;
        }
        if (item.identity == "组长") {
          flag5 = true;
        }
      });
      if (flag4) {
        this.$message.warning("请给专家任命角色");
      } else if (!flag5) {
        this.$message.warning("请任命一个组长");
      } else {
        if (this.value1.length != 2) {
          this.$message.warning("评审时间不能为空");
        } else {
          if (this.selectData2.length % 2 == 0) {
            this.$message.warning("专家评审团人员数量不能为偶数");
          } else {
            if (this.selectData2.length == 1) {
              this.$message.warning("专家评审团人员数量不能少于3人");
            } else {
              this.sendFlag = true;
            }
          }
        }
      }
    },
    sendSelect() {
      let reviewStartTime =
        new Date(this.value1[0]).getFullYear() +
        "-" +
        (this.value1[0].getMonth() + 1) +
        "-" +
        this.value1[0].getDate();
      let reviewEndTime =
        new Date(this.value1[1]).getFullYear() +
        "-" +
        (this.value1[1].getMonth() + 1) +
        "-" +
        this.value1[1].getDate();
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/send", {
          planSummaryId: this.joinData[0].id,
          reviewEndTime: reviewEndTime,
          reviewStartTime: reviewStartTime,
          companyName: JSON.parse(localStorage.user).companyName
        })
        .then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.flag = 2;
            this.getSelect();
            this.summarylist();
            this.sendFlag = false;
          } else {
            this.$message.warning(res.data.meta.message);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    getSelect() {
      this.$axios
        .post(
          config.baseUrl +
            "special/v1.0/special/list?size=10&companyId=" +
            JSON.parse(localStorage.user).companyId +
            "&current=" +
            1
        )
        .then(res => {
          if (res.data.meta.success) {
            if (res.data.data.records.length > 0) {
              res.data.data.records.map(item => {
                if (!item.identity) {
                  item.identity = "/";
                }
              });
            }
            this.selectData2 = res.data.data.records;
            if (this.flag != 2) {
              this.flag = 1;
            }
          } else {
            if (res.data.meta.message != "暂无数据") {
              this.$message.warning(res.data.meta.message);
            }
            this.selectData2 = [];
            this.flag = 0;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    setBefore(id, n) {
      let id1 = "";
      this.selectData2.map(item => {
        if (item.identity == "组长") {
          id1 = item.id;
        }
      });
      if (n == 1 && id1 != "") {
        this.startSetRole(id1, 2);
      }

      this.startSetRole(id, n);
    },
    startSetRole(id, n) {
      this.$axios
        .post(config.baseUrl + "special/v1.0/special/edit", {
          id: id,
          identity: n,
          planSummaryId: ""
        })
        .then(res => {
          if (res.data.meta.success) {
            this.allData = res.data.data;
            this.getSelect();
          } else {
            if (res.data.meta.message != "暂无数据") {
              this.$message.warning(res.data.meta.message);
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    summarylist() {
      this.$axios
        .get(
          config.baseUrl +
            "bsReviewSendCompany/v1.0/company/queryCompanySummaryList?companyId=" +
            this.joinData[0].companyId
        )
        .then(res => {
          if (res.data.meta.success) {
            this.data4 = res.data.data;
          } else {
            if (res.data.meta.message != "暂无数据") {
              this.$message.warning(res.data.meta.message);
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    reset() {
      this.formInline.province = "";
      this.currentPage = 1;
      this.formInline.key = "";
      let url = config.baseUrl + "special/v1.0/special/info";

      if (this.selectData2.length > 0) {
        url = config.baseUrl + "special/v1.0/special/editList";
      }
      this.loading1 = true;
      this.$axios
        .post(url, {
          businessId: JSON.parse(localStorage.user).businessId,
          companyId: JSON.parse(localStorage.user).companyId,
          current: this.currentPage,
          keyWord: this.formInline.key,
          region: this.formInline.province,
          size: 10
        })
        .then(res => {
          this.loading1 = false;

          if (res.data.meta.success) {
            this.allData = res.data.data.records;
            this.total = res.data.data.total;
            var arr = this.selectArr["obj" + this.currentPage];
          } else {
            this.$message.warning(res.data.meta.message);
            this.allData = [];
            this.total = 0;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    getAllList() {//获取专家
      let url = config.baseUrl + "special/v1.0/special/info";
      if (this.selectData2.length > 0) {
        url = config.baseUrl + "special/v1.0/special/editList";
      }
      this.loading1 = true;
      this.$axios
        .post(url, {
          businessId: JSON.parse(localStorage.user).businessId,
          companyId: JSON.parse(localStorage.user).companyId,
          current: this.currentPage,
          keyWord: this.formInline.key,
          region: this.formInline.province,
          size: 10
        })
        .then(res => {
          this.loading1 = false;

          if (res.data.meta.success) {
            this.allData = res.data.data.records;
            this.total = res.data.data.total;
            var arr = this.selectArr["obj" + this.currentPage];
            if (arr) {
              this.allData.map(item => {
                arr.map(item2 => {
                  if (item2.id == item.id) {
                    this.$nextTick(() => {
                      this.$refs.multipleTable1.toggleRowSelection(item);
                    });
                  }
                });
              });
            }
          } else {
            this.$message.warning(res.data.meta.message);
            this.allData = [];
            this.total = 0;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    getjoinData() {//获取预案
      this.$axios
        .post(config.baseUrl + "emergency/v1.0/summary/plans", {
          companyId: JSON.parse(localStorage.user).companyId
        })
        .then(res => {
          if (res.data.meta.success) {
            this.joinData = res.data.data;
            this.sendSelect2();
          } else {
            if (res.data.meta.message != "暂无数据") {
              this.$message.warning(res.data.meta.message);
            }
            this.joinData = [];
            this.getAllList();
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllList();
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@media print {
  h2 {
    font-weight: bold;
    font-size: 20px;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
  }
  .radioImg {
    text-align:center;
    font-size:20px;
  }
  
  .edit-name {
    .el-input__inner {
      border: 0;
      padding: 0;
    }
  }
  .comName {
    font-weight: bold;
    color: #333;
    padding-left: 5px;
    margin-bottom: 8px;
  }
  .ideaTitle {
    font-weight: bold;
    font-size: 20px;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
  }
  .ideaTable {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    color: #333;

    th {
      border: 1px solid #ccc;
      width: 100px;
      font-weight: 700;
      line-height: 30px;
    }
    .is-ok {
      width: 100px;
      font-weight: 100;
    }
    td {
      border: 1px solid #ddd;
      border-collapse: collapse;
      padding: 15px 10px;
      line-height: 24px;

      strong {
        font-weight: bold;
        display: block;
        text-align: center;
      }

      img {
        width: 120px;
        height: 60px;
      }
    }
    .firtTit {
      padding: 0 10px;
      width: 120px;
      text-align: center;
    }
    td:first-child {
      text-align: center;
    }
    .radioImg {
      img {
        width: 25px;
        height: 25px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.online {
  .print-btn{
       background:#4080ff;float:right;color:#fff;position:absolute;top:64px;right:68px;
  }
  .print-btn:hover{background:#4080ff;color:#fff;opacity:0.8;}
  .el-textarea.is-disabled {
    .el-textarea__inner {
      background: #fff;
      color: #333;
      height: auto;
    }
  }
  dl {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 14px;
    .dl-btn {
      display: inline-block;
      padding: 0 10px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 6px;
      text-align: center;
      margin-bottom: 14px;
    }
    dt.dl-btn {
      background: #f6f9ff;
      color: #3f80ff;
    }
    dd {
      margin-bottom: 10px;
      color: #808080;
      line-height: 36px;
      a {
        color: #30dd05;
        text-decoration: underline;
      }
      span.dl-btn {
        background: #f6f9ff;
        color: #3f80ff;
        padding: 0 20px;
        margin: 0 10px;
      }
    }
  }
  .el-dialog__title {
    font-size: 18px;
    font-weight: 700;
  }
  .mianOut {
    padding: 0 30px;
    .note {
      height: 42px;
      line-height: 42px;
      p {
        color: #666;
        padding-left: 42px;
        img {
          width: 26px;
          height: 26px;
          margin-right: 5px;
        }
      }
    }
    .asTitle {
      h3 {
        font-weight: bold;
        font-size: 16px;
        color: #666;
        padding: 20px 0 0 20px;
      }
    }
    .mianInner {
      background: #fff;
      padding-bottom: 30px;

      .asList {
        width: 300px;
        height: 49px;
        margin: 20px auto;
        border: 1px solid #4080ff;
        border-radius: 8px;
        li {
          float: left;
          width: 50%;
          a {
            display: block;
            color: #666;
            height: 47px;
            text-align: center;
            line-height: 47px;
          }
          a.active {
            color: #fff;
            background: #4080ff;
          }
          a.active:hover {
            color: #fff;
          }
          a:hover {
            color: #4080ff;
          }
        }
        li:first-child {
          a {
            border-radius: 8px 0 0 8px;
          }
        }
        li:last-child {
          a {
            border-radius: 0 8px 8px 0;
          }
        }
      }
      .expert_main {
        .asBtns {
          padding: 0 90px 0 100px;
          .el-form {
            .formBtn {
              display: block;
              float: left;
              width: 160px;
              height: 36px;
              text-align: center;
              line-height: 36px;
              color: #fff;
              border-radius: 8px;
              background: #4080ff;
              background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
              margin-top: 3px;
              cursor: pointer;
            }
            .formBtn:hover {
              opacity: 0.8;
            }
            .el-input__inner {
              height: 36px;
            }
            .el-button.search {
              color: #fff;
              border: none;
              border-radius: 8px;
              width: 79px;
              height: 36px;
              background: #4080ff;
              background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
              padding: 0;
              line-height: 36px;
              img {
                position: relative;
                top: -1px;
                margin-right: 5px;
              }
            }
          }
        }

        .el-button:hover {
          opacity: 0.8;
        }
        /*表格*/
        .el-table {
          width: calc(100% - 200px);
          margin: 0 auto;
          border-top: 1px solid #ebeef5;
          .fileName {
            text-decoration: underline;
            color: #4080ff;
            cursor: pointer;
          }
          .fileName:hover {
            opacity: 0.8;
          }
        }

        .el-table th > .cell {
          color: #333333;
          font-weight: bold;
        }
        .page-container {
          display: flex;
          justify-content: center;
          margin-top: 30px;
          .el-button {
            height: 28px;
            padding: 0 10px;
            margin-top: 4px;
            border-radius: 8px;
          }
        }
      }

      .waitSend {
        /*表格*/
        .el-table {
          width: calc(100% - 200px);
          margin: 0 auto;
          border-top: 1px solid #ebeef5;
          .fileName {
            text-decoration: underline;
            color: #4080ff;
            cursor: pointer;
          }
          .fileName:hover {
            opacity: 0.8;
          }
        }
        .el-button {
          border-radius: 8px;
          border: 1px solid #eef4fd;
          background: #eef4fd;
          height: 36px;
          padding: 0;
          width: 85px;
          color: #4080ff;
        }

        .el-button:hover {
          background: #fff;
          border-color: #4080ff;
        }
        .detail-btn.active {
          background: #4080ff;
          color: #fff;
          border: 1px solid #4080ff;
        }
        .detail-btn.active:hover {
          opacity: 0.8;
          background: #4080ff;
          color: #fff;
          border-color: #4080ff;
        }
        .el-table th > .cell {
          color: #333333;
          font-weight: bold;
        }
        .sendMain1 {
          background: #fff;
          padding-bottom: 30px;

          .el-button:hover {
            opacity: 0.8;
          }
          .formbtns {
            margin: 40px 0 20px;
          }
        }
        .sendMain2 {
          background: #fff;
          margin-top: 20px;

          .timeSelect {
            text-align: center;
            .el-date-editor .el-range-separator {
              width: 6%;
            }
          }
        }
        .sendMain3 {
          background: #fff;
          margin-top: 30px;
          padding-bottom: 30px;
        }
      }

      .backInfo {
        .infoMain1 {
          background: #fff;
          padding-bottom: 30px;

          .timeSelect {
            text-align: center;
            .el-date-editor .el-range-separator {
              width: 6%;
            }
          }
          .el-button:hover {
            opacity: 0.8;
          }
          .downBox {
            margin: 40px 0 20px;
            .download {
              display: block;
              float: right;
              margin-right: 100px;
              width: 79px;
              height: 36px;
              text-align: center;
              line-height: 36px;
              color: #4080ff;
              border-radius: 8px;
              background: #eefdf4;
              cursor: pointer;
              i {
                font-size: 18px;
                position: relative;
                top: 2px;
              }
            }
            .download:hover {
              opacity: 0.8;
            }
          }
          /*表格*/
          .el-table {
            width: calc(100% - 200px);
            margin: 0 auto;
            border-top: 1px solid #ebeef5;
            .fileName {
              text-decoration: underline;
              color: #4080ff;
              cursor: pointer;
            }
            .fileName:hover {
              opacity: 0.8;
            }
          }

          .el-table th > .cell {
            color: #333333;
            font-weight: bold;
          }
        }
        .infoMain2 {
          background: #fff;
          padding-bottom: 80px;
          margin-top: 30px;

          p {
            line-height: 36px;
            font-weight: bold;
            font-size: 14px;
            color: #666;
            text-align: center;
            margin-top: 60px;

            i {
              font-size: 20px;
              color: #69ed79;
              margin-right: 10px;
              position: relative;
              top: 3px;
            }

            a {
              display: inline-block;
              margin-left: 25px;
              width: 150px;
              height: 36px;
              color: #fff;
              border-radius: 8px;
              line-height: 36px;
              text-align: center;
              cursor: pointer;
              font-weight: normal;
              background: #4080ff;
              background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
            }

            a:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  .ideaMain {
    padding: 0 50px;

    .ideaTitle {
      font-weight: bold;
      font-size: 20px;
      color: #333;
      text-align: center;
      margin-bottom: 25px;
    }

    .comName {
      font-weight: bold;
      color: #333;
      padding-left: 5px;
      margin-bottom: 8px;
    }

    .ideaTable {
      width: 100%;
      border: 1px solid #ddd;
      border-collapse: collapse;
      color: #333;
      th {
        border: 1px solid #ccc;
        font-weight: 700;
      }
      .is-ok {
        width: 100px;
        font-weight: 100;
      }
      td {
        border: 1px solid #ddd;
        border-collapse: collapse;
        padding: 15px 10px;
        line-height: 24px;

        strong {
          font-weight: bold;
          display: block;
          text-align: center;
        }

        img {
          width: 120px;
          height: 60px;
        }
      }

      td:first-child {
        text-align: center;
      }
      .radioImg {
        text-align: center;
        font-size:20px;
      }
    }

    .table_save {
      margin-top: 20px;
      display: block;
      width: 79px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      float: right;
      color: #fff;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      background: #4080ff;
      background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
    }
    .table_save:hover {
      opacity: 0.8;
    }

    .el-textarea__inner {
      resize: none;
      border: none;
      cursor: pointer;
      height: 100px;
      padding: 0;
    }
    .ideaTable1 {
      thead {
        line-height: 30px;

        tr:first-child {
          th {
            font-weight: 800;
            min-width: 80px;
          }
        }
      }
    }
  }
  .edit-name {
    .el-input__inner {
      border: 0;
      padding: 0;
    }
  }
}
</style>
<style lang="less" scoped>
tr,td,tr p,textarea{
  cursor: default;
}
.exitTcNote {
  padding-left: 40px;
  margin: 30px 0;
  font-size: 16px;
  display: block;
  background: url(../../../static/images/warn_icon.png) no-repeat left 5px
    center;
  background-size: 30px 30px;
  line-height: 26px;
}
.save {
  display: block;
  float: right;
  margin-right: 15px;
  width: 79px;
  height: 36px;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  border-radius: 8px;
  background: #4080ff;
  background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
  cursor: pointer;
}
.save:hover,
.send2:hover {
  opacity: 0.8;
}
.send {
  font-size: 14px;
  display: block;
  float: right;
  margin-right: 100px;
  width: 120px;
  height: 36px;
  text-align: center;
  cursor: pointer;
  line-height: 36px;
  border-radius: 8px;
  color: #fff;
}
.send1 {
  background: #ccc;
  cursor: no-drop;
}
.send2 {
  cursor: pointer;
  background: #4080ff;
  background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
}
</style>